import React from 'react';
import { useLocation, useMatch, useNavigate, useParams } from 'react-router-dom';

const initData = [
  {
    id: 1,
    name: 'aaa'
  },
  {
    id: 2,
    name: 'bbb'
  },
  {
    id: 3,
    name: 'ccc'
  }
]

export default function Student(props) {
  // 可以使用钩子获取参数
  const { id } = useParams();
  const location = useLocation();
  const match = useMatch('/student/:id'); //用来检查当前url是否匹配某个路由
  // 如果匹配则返回一个对象，不匹配则返回null

  // 获取一个用于跳转的函数
  const nav = useNavigate();

  console.log(id, location, match, '---', nav)

  const clickHandler = () => {
    // nav('/about'); // 默认使用push
    nav('/about', { replace: true }); //使用replace
  }
  const stu = initData.find(item => item.id === +id);
  return (
    <div>
      {stu.id} --- {stu.name}
      学生
      <button onClick={clickHandler}>点我一下</button>
    </div>
  )
}
